<template>
  <div class="container">
    <swiper :options="swiperOption" v-if="show" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="item in swiperList" :key="item.id">
      <img :src="item.imgUrl" class="swiperimg">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>
  // swiper options example:
  export default {
    name: 'HomeSwiper',
    props:{
      swiperList:Array
    },
    data() {
      return {
        swiperOption: {
          pagination : '.swiper-pagination',
        },
      }
    },
    computed:{
      show(){
        return this.swiperList.length==0?false:true
      }
    }
  }
</script>


<style lang="scss" scoped>
  //样式穿透
  .container /deep/ .swiper-pagination-bullet-active{
        background-color:#fff !important;
  }
  .container{
    overflow: hidden;
    height: 0;
    width: 100%;
    padding-bottom: 31.5%;
  }
  .swiperimg{
    width: 100%;
  }
  
</style>